<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加行为属性</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/ztree/css/metroStyle/metroStyle.css">
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/ztree/js/jquery.ztree.excheck.js"
            charset="utf-8"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
</head>

<body>
<div class="x-body">
    <form class="layui-form layui-form-pane" style="margin-left: 20px;">
        <div style="width:100%;height:400px;overflow: auto;">
            <div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend style="font-size:16px;">行为属性信息</legend>
                </fieldset>
            </div>
            <div class="layui-form-item">
                <label for="fieldName" class="layui-form-label" style="width:150px;">
                    属性名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="fieldName" name="fieldName" lay-verify="fieldName"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="fieldLabel" class="layui-form-label" style="width:150px;">
                        属性标签
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="fieldLabel" name="fieldLabel" lay-verify="fieldLabel" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="alias" class="layui-form-label" style="width:150px;">
                        属性别名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="alias" name="alias" lay-verify="alias" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 110px;">属性类型</label>
                    <div class="layui-input-block" style="width: 220px;">
                        <select id="fieldType" name="fieldType" lay-verify="required">
                            <option value="">请选择类型...</option>
                            <option value="date">date</option>
                            <option value="string">string</option>
                            <option value="int">int</option>
                            <option value="double">double</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 110px;">聚合标识</label>
                <div class="layui-input-block" style="width: 220px;">
                    <select id="aggFlag" name="aggFlag" lay-verify="required">
                        <option value="0">维度</option>
                        <option value="1">量度</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 110px;">所属行为</label>
                <div class="layui-input-block" style="width: 220px;">
                    <select id="behaviorId" name="behaviorId" lay-verify="required">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 110px;">对照类型</label>
                <div class="layui-input-block" style="width: 220px;">
                    <select id="fieldDictType" name="fieldDictType">
                        <option value="">请选择...</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="fieldDesc" class="layui-form-label" style="width:150px;">
                        属性描述
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="fieldDesc" name="fieldDesc" lay-verify="fieldDesc" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">


                <div style="width: 100%;height: 55px;background-color: white;border-top:1px solid #e6e6e6;
  position: fixed;bottom: 1px;margin-left:-20px;">
                    <div class="layui-form-item" style=" float: right;margin-right: 30px;margin-top: 8px">
                        <button class="layui-btn layui-btn-normal" lay-filter="add" lay-submit>
                            增加
                        </button>
                        <button class="layui-btn layui-btn-primary" id="close">
                            取消
                        </button>
                    </div>
                </div>
            </div>
    </form>
</div>

    <script>
        $ = layui.jquery;
        var form = layui.form
                , layer = layui.layer;

        form.render();

        //自定义验证规则
        form.verify({
            fieldName: function (value) {
                if (value.trim() == "") {
                    return "名称不能为空";
                }
            },
            fieldLabel: function (value) {
                if (value.trim() == "") {
                    return "标签不能为空";
                }
            },
            alias: function (value) {
                if (value.trim() == "") {
                    return "别名不能为空";
                }
            },
            aggFlag: function (value) {
                if (value.trim() == "") {
                    return "聚合标识不能为空";
                }
            }
        });

        $('#close').click(function () {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
        //监听提交
        form.on('submit(add)', function (data) {
            layerAjax('addBehaviorField', data.field, 'behaviorFieldList');
            return false;
        });




        function getBehaviorList(channelId) {
            $.ajax({
                url: "${re.contextPath}/behavior/selectBehaviorList",
                type: "GET",
                data: {
                    page : 1,
                    limit : 5000,
                    channelId: channelId
                },
                success: function (result) {
                    for (var i=0;i<result.data.length;i++){
                        var id = result.data[i].id;
                        var behaviorName = result.data[i].behaviorName;
                        $("#behaviorId").append(new Option(behaviorName, id));
                    }
                    form.render();
                }
            });
        }

        function getDictList() {
            $.ajax({
                url: "${re.contextPath}/loadsDict/selectDictList",
                type: "GET",
                data: {
                    type: 'lookup'
                },
                success: function (result) {
                    for (var i=0;i<result.data.length;i++){
                        var key = result.data[i].dictKey;
                        var value = result.data[i].dictValue;
                        $("#fieldDictType").append(new Option(value, key));
                    }
                    form.render();
                }
            });
        }

        $(function () {
            var channelId = parent.parent.document.getElementById('channelId').value;
            getBehaviorList(channelId);
            getDictList();
        });
    </script>
</body>

</html>
